<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: lihao
 * @LastEditTime: 2022-03-06 21:12:41
-->
<template>
  <div class="app">
    <div class="app-main-cotainer"><router-view></router-view></div>
  </div>
</template>



// <script>
import MySearch from "@/pages/Search.vue";
import { defineComponent, onBeforeMount, ref } from "vue";
import { Toast } from "vant";
import { mainStore } from "@/store/index.js";
import { userStore } from "@/store/userdata.js";
import { login, updateToken } from "@/api/services/user.service.js";
import { useRouter } from "vue-router";
import { reConnection } from "@/utils/ws/wsUtils.js";
export default defineComponent({
  name: "App",
  setup() {
    const main = mainStore();
    const active = ref(0);
    const router = useRouter();
    const user = userStore();

    // 监听pinia里面存放后端消息的方式
    main.$subscribe((mutation, state) => {
      // 输出后端存放的消息
      if (state.wsMessage) {
        Toast(`收到回复:${state.wsMessage.data}`);
        state.wsMessage = null;
      }
      console.log(state.wsMessage);
    });

    // 刷新或第一次页面时利用token获取用户信息
    const getUserData = () => {
      let token = localStorage.getItem("Authorization");
      console.log(typeof token);
      if (token) {
        console.log("////");
        updateToken()
          .then((res) => {
            user.logIn(res.result.user);
            localStorage.setItem("Authorization", res.result.newtoken);
            main.logIn();
          })
          .catch((rej) => {
            // Toast.fail("登录已经过期，请重新登录");
            let path = window.location.pathname;
            if (/userhome/.test(path)) {
              router.push({ path: "/login" });
            }
          });
      }
    };
    getUserData();

    onBeforeMount(() => {
      console.log(localStorage.getItem("Authorization"));
      if (localStorage.getItem("Authorization")) {
        // reConnection(localStorage.getItem("Authorization"))
        console.log(123);
      }
    });
    return {
      main,
      active,
    };
  },
  components: {
    "my-search": MySearch,
  },
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}

#test {
  position: absolute;
  bottom: 0;
  text-align: center;
  a {
    margin: 3px;
  }
}

.app-search-container {
  position: fixed;
  width: 375px;
  top: 0;
}

.app-main-cotainer {
  z-index: 1;
}

.app-search-container {
  z-index: 10;
}

.van-tabbar {
  box-shadow: 0 1px 7px 0px gray;
}

.blank-fill {
  height: var(--van-tabbar-height);
}

.v-note-wrapper .v-note-op {
  border-bottom: none !important;
}
</style>